<template>
    <!-- 全屏遮罩 -->
    <div class="print-mask">
      <div class="print-wrapper">
        <!-- 预览列表 -->
        <div
          v-for="(item, idx) in items"
          :key="idx"
          class="ticket-preview"
        >
          <img class="qr" :src="qrList[idx]" />
          <div class="txt">
            <!-- <div>存货名称：</div>
            <div>{{ item.存货名称 }}</div> -->
            <div>存货编码：</div>
            <div>{{ item.存货编码 }}</div>
            <div>供应商：</div>
            <div>{{ item.供应商名称 }}</div>
            <div>检验日期：</div>
            <div>{{ item.检验日期?.slice(0, 10) }}</div>
            <div>批号：</div>
            <div>{{ item.批号 }}</div>
          </div>
        </div>
  
        <div class="buttons">
          <el-button type="primary" @click="doPrint">打印</el-button>
          <el-button @click="$emit('close')">关闭</el-button>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue';
  import QRCode from 'qrcode';
  
  const props = defineProps({ items: Array });
  console.log('PrintTemplate received items:', props.items); // 看这行打印啥
  const emit = defineEmits(['close']);
  
  const qrList = ref([]);
  
  /* 生成二维码 base64 */
  onMounted(async () => {
    for (const it of props.items) {
      const url = await QRCode.toDataURL(it.单据条码, { width: 110, margin: 1 });
      qrList.value.push(url);
    }
  });
  
  /* 打印 */
  function doPrint() {
    const html = props.items
      .map(
        (it, i) => `
          <div class="ticket">
            <img class="qr" src="${qrList.value[i]}" />
            <div class="txt">
              <div>存货编码：</div>
              <div>${it.存货编码}</div>
              <div>供应商：</div>
              <div>${it.供应商名称}</div>
              <div>检验日期：</div>
              <div>${it.检验日期?.slice(0, 10)}</div>
              <div>批号：</div>
              <div>${it.批号}</div>
            </div>
          </div>`
      )
      .join('');
  
    const win = window.open('', '_blank');
    win.document.write(`
      <html>
        <head>
          <meta charset="utf-8" />
          <title>打印</title>
          <style>
            * { margin: 0; padding: 0; box-sizing: border-box; }
            body { font-family: Arial, sans-serif; }
  
            /* 60 × 30 mm 票，整体左移 4 mm 避免裁切 */
            .ticket {
              width: 60mm;
              height: 30mm;
              display: flex;
              align-items: center;
              page-break-after: auto;
              margin-left: 5mm;   /* 关键：整体内缩 */
            }
            .qr {
              width: 25mm;
              height: 25mm;
              object-fit: contain;
            }
            .txt {
              width: 28mm;
              font-size: 9px;
              line-height: 1.3;
              margin-left: 3mm;   /* 文字再右移 2 mm */
            }
            @media print {
              body { margin: 0 !important; }
              .ticket { border: none; }
            }
          </style>
        </head>
        <body>${html}</body>
      </html>
    `);
    win.document.close();
    win.onload = () => {
      win.print();
      win.close();
      emit('close');
    };
  }
  </script>
  
  <style scoped>
  .print-mask {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow-y: auto;
  }
  .print-wrapper {
    margin-top: 40px;
    background: #fff;
    padding: 20px;
    border-radius: 4px;
    max-height: 80vh;
    overflow-y: auto;
  }
  .ticket-preview {
    display: flex;
    align-items: center;
    width: 60mm;
    height: 30mm;
    border: 1px solid #ddd;
    margin-bottom: 10px;
    margin-left: 4mm;   /* 预览也同步内缩 */
  }
  .ticket-preview .qr {
    width: 25mm;
    height: 25mm;
    object-fit: contain;
  }
  .ticket-preview .txt {
    width: 28mm;
    font-size: 9px;
    line-height: 1.3;
    margin-left: 2mm;
  }
  .buttons {
    text-align: center;
    margin-top: 10px;
  }
  </style>